﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="<%=request.getContextPath() %>"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
    <title>平台登录</title>
    <meta charset="UTF-8" />
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
    <style type="text/css">
        body{ margin:0px;
            padding:0px;
            font-size:12px;
            background-color:#F7F8F9;}
        #apDiv1 {
            position:absolute;
            width:80%;
            height:400px;
            z-index:1;
            left:10%;
            top:17%;
            overflow: visible;
            text-align:center;
            margin:auto;
            background: url(${ctx }/resources/images_system/midd_bg.png) no-repeat center center;
        }
        /*登录表单form样式*/
        .login-form {
            margin:90px auto 0;
            padding:0;
            position:relative;/*为用户头像定位做一个参照点*/
            width:440px;
            height:250px;
        }

        /*表单内部元素样式设置*/
        .login-form div {
            width:270px;
            height:28px;
            position:relative;
            line-height:30px;
            border:none;
            margin-top: 20px;
            margin-right: auto;
            margin-bottom: 0px;
            margin-left: auto;
        }
        /*用户和密码的icon制作*/
        .login-form .user-icon,
        .login-form .password-icon {
            display:inline-block;
            font-family: 'loginform-icon';
            font-size:15px;
            text-align:center;
            line-height:28px;
            color:rgb(153,153,153);
            position:absolute;
            left:0px;
            top:0px;
            border:none;
            padding-top:6px;
            width:30px;
            height:28px;
            transition: all 300ms linear;
        }
        .login-form .Forgot-password {
            display:inline-block;
            font-family: 'loginform-icon';
            font-size:12px;
            text-align:center;
            line-height:28px;
            color:#FFF;
            position:absolute;
            left:377px;
            top:113px;
            border:none;
            padding-top:6px;
            width:79px;
            height:28px;
            transition: all 300ms linear;
        }
        /*表单input的样式*/
        .login-form .username input, .login-form .password input {
            height:100%;
            width:240px;/*使用calc计算表单的宽度（其中40px是用来放icon的空间）*/
            padding-left:30px;
            border:1px solid #CCC;
            display:block;
            transition: all 300ms linear;
        }
        .login-form .code input{
            height:100%;
            width:90px;/*使用calc计算表单的宽度（其中40px是用来放icon的空间）*/
            padding-left:40px;
            border:1px solid #CCC;
            display:block;
            height:28px;
            transition: all 300ms linear;
        }
        .login-form .username input:focus + span, .login-form .password input:focus + span,.login-form .code input:focus + span{
            background:-*-linear-gradient(top,rgb(255,255,255),rgb(245,245,245));
            color:rgb(51,51,51);
        }
        .login-form .username input:focus + span:after, .login-form .password input:focus + span:after,.login-form .code input:focus + span:after {
            border-left-color:rgb(250,250,250);
        }
    </style>
    <script type="text/javascript" src="${ctx}/resources/js/jquery-1.10.2.min.js" ></script>
    <script type="text/javascript" src='${ctx}/resources/js/common.js'></script>
    <script type="text/javascript" src="${ctx}/resources/js/layer/layer.min.js" ></script>
</head>
<body topmargin="0" marginheight="0" leftmargin="0" marginwidth="0" style="overflow-y:hidden;overflow-x:hidden;" scroll="no">
<div>
    <div id="apDiv1">
        <form action="${ctx }/login/systemLogin" method="post" class="login-form" id="f1" >
            <div class="username">
                <input id="userName" type="text" name="userName" placeholder="admin@camelotchina.com" autocomplete="on" />
                <span id="passWord" class="user-icon icon"><img src="${ctx }/resources/images_system/icon_1.gif" width="16" height="16" /></span>
            </div>
            <div class="password">
                <input id="password" type="password" name="userPwd" placeholder="*******" />
                <span class="password-icon icon"><img src="${ctx }/resources/images_system/icon_2.gif" width="16" height="16" /></span>
            </div>
            <div  class="Forgot-password">忘记密码？</div>
            <div class="code">
                <table cellpadding="0"  border="0" cellspacing="0" width="100%"><tr>
                    <td width="50%" align="left"  style="color:#fff" ><input type="code" name="code" placeholder="验证码"  class="code"/>
                        <span class="password-icon icon"><img src="${ctx }/resources/images_system/icon_3.gif" width="16" height="16" /></span>
                    </td>
                    <td width="45%" align="center"  style="color:#fff">插入验证码</td>
                    <td width="5%" align="center">&nbsp;</td>
                </tr>
                </table>
            </div>
            <div style="height:55px;margin:0px auto;">
                <table cellpadding="0"  border="0" cellspacing="0" width="100%">
                    <tr>
                        <td width="50%" align="left"  style="color:#fff" height="50"><input type="checkbox" name="me" id="me" value="me" checked="checked" />
                            记住密码</td>
                        <td width="50%" align="right"  style="color:#fff"><img src="${ctx }/resources/images_system/button_login.png" width="118" height="35" border="0" onclick="javascript:$('#f1').submit();" /></td>
                    </tr>
                </table>
            </div>
        </form>
    </div>
</div>
</body>
</html>